<template>
	<view class="tab-home-box">
		<view class="header-top">
			<view class="header-title">
				工装定制下单
			</view>
			<image :src="imageUrl + '7706f61462ea40a7881196fcc0d3dd06.png'" class="header-image"></image>
			<view class="shop">
				<image  :src="imageUrl + 'dd40f5a4f9314904aa9913743a748eb1.png'" class="slide-image"></image>
			</view>
			<view class="notice" @tap="openNotice">
				<view style="width: 45rpx;height: 40rpx;margin-bottom: 22rpx;">
					<image :src="imageUrl+'601026d0da8048218aa6901d9e3c5ce0.png'" mode="" class="notice-image"></image>
				</view>
				<view class="notice-title">
					{{list.name}}
				</view>
			</view>
		</view>
		<view class="goods-cont">
			<view :class="fixType ? 'product-tab-fixed' :'product-tab'">
				<scroll-view class="product-tab-view" scroll-x="true" @scroll="scroll">
					<view class="product-tab-item" v-for="(item,index) in food" :key="item.id" @tap="productTabSelect(item.name)">
						<text :class="tabActiveType == item.name ? 'active' :''">{{item.name}}</text>
					</view>
				</scroll-view>
			</view>
			<view class="goods-list" v-if="goodslist.length>0">
				<view v-for="(item, index) in goodslist" :key="item.id">
				<view class="goods-box">
					<view class="goods-image">
						<image :src="imageUrl + item.image" mode="" @tap="showGoodsDetailFun(item.image)" :data-item="JSON.stringify(item)" :data-groupindex="groupindex" :data-index="index"></image>									
							<view v-if="item.stock == 0">补货中</view>
					</view>
					<view class="goods-info">
						<!-- @tap="addCart" -->
						<view class="goods-name">{{item.name}}</view>
						<view class="goods-bootom" >
							<view class="goods-price">
								<text class="goods-price-point">￥</text>
								<text>{{item.price}}</text>
								<text class="text-underline" v-if="item.price !== item.price">{{item.price}}</text>
							</view>
							<view class="goods-add-cart" >
							<view class="add-cart-standards" >
								<view class="goods-count-point" v-if="that.parafd.goodsNum" style="position: relative;">{{that.parafd.goodsNum}}</view>
									<image class="add-default" :src="imageUrl +'afa5414d6dfb4e0c962c013cb09edeae.png'" :data-item="JSON.stringify(item)" :data-groupindex="groupindex" :data-index="index" @tap="selectFormat"></image>
									<view v-if="item.goodsNumInCarts !=null || item.goodsNumInCarts>0"  style="min-width:40rpx;min-height:40rpx;border-radius:50%;background-color: red;position: absolute;right:-18rpx;top: -24rpx;color: #FFFFFF;font-size: 24rpx;display: flex;align-items: center;justify-content: center;">{{item.goodsNumInCarts}}</view>
										
								</view>
							</view> 
						</view>
					</view>
					<view class="mustChoose" v-if="item.requiredFlag !=0">
						必选
					</view>
				</view>
			</view>
			<u-loadmore :status="status" icon-type="iconType" :load-text="loadText" />
		</view>
		<view class="nodata" v-if="goodslist.length == 0">
			<view class="more-tip">暂无数据~</view>
		</view>
		</view>
		<!-- 商品规格 -->
		<view class="goods-format" v-if="showGoodsFormat" catchtouchmove="ture">
			<view class="format-mask" @tap="hideGoodsFormat"></view>
			<view class="goods-format-box">
				<u-icon name="close-circle" color="#323332" size="50" class="goods-format-box-close" @tap="hideGoodsFormat"></u-icon>
				<!-- <image  src="/static/img/close_btn.png" ></image> -->
				<view class="goods-format-message">
					<image :src="imageUrl + goodsFormat.image"></image>
					<view>
						<text class="goods-name">{{goodsFormat.name}}</text>
						<text  class="goods-price-point goods-price">￥</text>
						<text class="goods-price">{{goodsFormat.price}}</text>
					</view>
					
				</view>
				<view class="goods-format-cont">
					<view class="format-list">
						<view class="format-title">请选择规格：</view>
						<view class="format-row">
							 	<view class="defa" :class="{'active1': rSelect.indexOf(index)!=-1}"
									v-for="(value,index) in infoArr" 
									:key="value" @tap="tapInfo(index,value)">
									{{value}}
								</view>
						</view>
					</view>
				</view>
				<view class="goods-format-btn">
					<view class="goods-title">下单数量</view>
					<view class="goods-format-price">
						<view class="add-plus-btn">
								<image class="add-plus-img" :src="imageUrl+'aa0172c5bd5d4b9286a201fbb42b7feb.png'" mode=""></image>
								<text  class="reduce-btn" :class="goodsNum <= 1 ? 'disabled' : 'normal'" @tap="goodsNum>1?reduceItem():''"></text>
								<input type="number" :disabled="true" :value="goodsNum==''||item.goodsNum<1?1:goodsNum" @blur="confirmCartNum()" @confirm="confirmCartNum()" 
								@input="confirmCartNum()" />
								<text  class="add-btn"  @tap="addItem()"></text>
						</view>
					</view>									
				</view>  
				<view class="goods-add-btn1"  @tap="chooseGoodsFormat" :data-item="JSON.stringify(goodsFormat)" :data-groupindex="goodsFormat.groupindex" :data-index="goodsFormat.index">选好了</view>         
			</view>
		</view>
		<view v-if="alertWindowFlag">
			<view class="alert_class">
				<view class="alert_content">
					<!-- <image class="alert_content_closebtn" mode="widthFix" src="../../static/images/gonggao.png"></image> -->
					<view style="width: 80%;">
						<view style="font-size: 32rpx;font-family: PingFang SC;font-weight: bold;color: #252626; margin: 20rpx 0;">— {{list.name}} —</view>
						<p style="height: 340rpx;overflow-y:scroll;color: #999999;font-size: 15px;word-wrap: break-word;text-align: left;">{{list.notice==null?'暂无通知':list.notice}}</p>
						<view class="alert-konw" @click="closeAlertWindow(true)">知道了</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import uninumberbox from "@/components/gwc/index";
	export default {
		data() {
			return {
				banners:[],
				imageUrl: 'http://124.71.202.247:8080/image/',
				food:[],
				goodslist:[],
				currentIndex:0,
				tabActiveType:'',//分类当前项
				pagination: {
					page: 1,
					limit: 10
				},
				showGoodsFormat:false,
				goodsFormat:[],
				infoArr: [],
				rSelect: [],
				guige: "",
				specSelected: {
				  number: "",
				  stock: "",
				  id: ""
				},
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '以上是所有数据'
				},
				total:'',
				list:{},
				list1:{},
				list2:{},
				alertWindowFlag:true,
				selectMoney:0,
				totalNum:0,
				goodsNum:1
			}
		},
		// computed:{
		// 	list(){
		// 		return JSON.parse(JSON.stringify(this.data));
		// 	}
		// },

		
		components: {
		  uninumberbox
		},
		onReachBottom() {
			var _this = this;
			console.log(_this.total)
			var pageNum = Math.ceil(_this.total / 10);
			if (_this.pagination.page >= pageNum) return;
			_this.status = 'loading';
			_this.pagination.page = ++_this.pagination.page;
			_this.getGoodList(_this.tabActiveType);
			if (_this.pagination.page >= pageNum || _this.pagination.page == 1) _this.status = 'nomore';
			else _this.status = 'loading';
		
		},
		onLoad() {
			var _this = this;
			console.log(_this.imageUrl,'_this.imageUrl>>>>>>')
			var userinfopre = uni.getStorageSync('userInfo');
			var viewed = uni.getStorageSync('viewed');
			var phineLogin=uni.getStorageSync('phineLogin');
			var wxLogin=uni.getStorageSync('wxLogin');
			var checkResult = uni.getStorageSync('checkResult');
			// _this.$set(_this.list, 'notice', _this.list.notice)
			if(phineLogin && wxLogin ){
				_this.getMemberCheck();
				_this.getToolingTypeList();
				_this.confirm();
				if(viewed){
					_this.alertWindowFlag=false;
					
				}				
			}else{
				uni.redirectTo({
					url:'../login/login'
				})
			}
		},
		watch: {
			// listDataNew: {
			// 	handler: (val, olVal) => {
			// 	  console.log('我变化了', val, olVal)
			// 	  if(newVal){
			// 	  	this.alertWindowFlag=true
			// 	  }else{
			// 	  	this.alertWindowFlag=false
			// 	  	}
			// 	},
			// 	deep: true
			//   }
		    list: {
		        handler(newVal,oldVal) {
					console.log('我变化了', newVal, oldVal)
					// if(newVal.id !=notice){
					// 	this.alertWindowFlag=true
					// }else{
					// 	this.alertWindowFlag=false
					// 	}
		        },
		        deep: true
		    }
		
		},
		// computed: {
		//       listDataNew() {
		//         return JSON.parse(JSON.stringify(this.list))
		//       }
		// },
		onShow() {
			var _this = this;
			var phineLogin=uni.getStorageSync('phineLogin');
			var wxLogin=uni.getStorageSync('wxLogin');
			if(phineLogin && wxLogin ){
				_this.getCartList();
				
				
				
			}
		},
		methods:{
			getMemberCheck(){
				var that = this;
				that.sendRequest({
					url : "/member/check",
					method : "POST",
					data : {
					},
					hideLoading : true,
					success:function (res) {
						console.log(res.result)
						var checkResult=res.result;
						uni.setStorageSync('checkResult',checkResult);
						if(res.result==null || res.result=={} ){
							uni.redirectTo({
								url:'../Authorization/Authorization'
							})	
						}
					}
				})
				
			},
			getCartList(){
				var that = this;
				that.sendRequest({
					url :"/info",
					method : "GET",
					data : {},
					hideLoading : true,
					success:function (res) {
						if(res.result != null){
							console.log(res,'info购物车列表')
							that.selectMoney=res.result.totalMoney;
							that.totalNum=res.result.totalNum;
							if(that.totalNum>0){
								uni.setTabBarBadge({
								  index: 1,
								  text: that.totalNum.toString()
								})
							}else{
								uni.removeTabBarBadge({
									 index: 1
								})
							}
						}
						
						
					}
				})
				
			},
			//选规格加1
			addItem(){
				var that=this;
				that.goodsNum=that.goodsNum+1;
				// that.goodsFormat.price += that.goodsFormat.price;
				
			},
			reduceItem(){
				var that=this;
				that.goodsNum=that.goodsNum-1;
				// that.goodsFormat.price -= that.goodsFormat.price;
			},
			//活动列表用于展示最新通知
			confirm(){
				var that=this;
				that.sendRequest({
					url :"/activity/list",
					method : "GET",
					data : {},
					hideLoading : true,
					success:function (res) {
						console.log(res,'下单时选择的活动列表')
						var list=res;
						that.list1=res;
						that.list.notice1="";
						that.list = list[0];
						if(!that.list.notice1){
							that.$set(that.list, 'notice1', that.list.notice)	
						}
						console.log(that.list.notice1,'that.list>>>>>>>>>')
						if(that.list.notice1){
							that.alertWindowFlag=true
							// that.list.notice1=''
						}
					},
				})
			},
			closeAlertWindow(viewed) {
				uni.setStorageSync('viewed',viewed);
				this.alertWindowFlag = false
			},
			openNotice(){
				this.alertWindowFlag = true
			},
			getToolingTypeList(){
				let _this =this;
				_this.sendRequest({
					url : "/toolingType/list",
					method : "GET",
					data : {
					},
					hideLoading : true,
					success:function (res) {
						console.log(res)
						_this.food=res
						_this.tabActiveType = _this.food[0].name;	
						// that.tabActiveTypeId=that.food[0].id;
						// this.goodsList=[];
						_this.getGoodList(_this.tabActiveType);
						
					}
				})
				
			},
			
			
			
			getGoodList(name){
				
				let _this =this;
				console.log(_this.goodsList,'that.goodsList=[]>>>>>>')
				let i = _this.food.findIndex(v=>v.name==name);
				let toolingTypeId= _this.food[i].id;
				console.log(toolingTypeId,'toolingTypeId>>>>>')
				_this.sendRequest({
					url :"/tooling/page",
					method : "GET",
					data : {
						pageNum:_this.pagination.page,
						pageSize:_this.pagination.limit,
						toolingTypeId:toolingTypeId
					},
					hideLoading : true,
					success:function (res) {
						console.log(res)
						// _this.goodslist=_this.goodslist.concat(res.records);
						_this.total=res.total;
						for (var i = 0; i < res.records.length; i++) {
							_this.goodslist.push(res.records[i]);
						}
						console.log(_this.goodslist,'this.goodslist>>>>')
					
						
					}
				})

			},
			// 商品分类切换
			productTabSelect(name){
				var that=this;
				that.pagination.page=1;
				that.tabActiveType = name;
				that.goodslist.splice(0, that.goodslist.length)
				console.log(that.goodslist,'that>>>>98977878')
				that.getGoodList(name);
			},
			//购物车选规则
			selectFormat(e){
				let that = this;
				that.dgrequestData='',
				this.guige ='';
				let item = JSON.parse(e.currentTarget.dataset.item);
				console.log("商品列表点击选择商品", item);
				that.goodindex = item;
				let goodsFormat = item;
				this.goodsFormat = goodsFormat;
				this.infoArr = goodsFormat.norm.split(",");
				console.log(this.infoArr,'this.infoArr>>>>>>')
				
				this.showGoodsFormat = true;
			},
			//弹框选规格
			tapInfo(e, item) {
			    console.log('this.rSelect',this.rSelect )//是数组，数组也有indexOf
			    console.log("item", item); //是数组，数组也有indexOf
			    console.log("e", e); //是数组，数组也有indexOf
			
			  this.guige = item;
			  this.specSelected.number = 1;
			  if (this.rSelect.indexOf(e) == -1) {
			    console.log(e); //打印下标
			    this.rSelect = [];
			    this.rSelect.push(e); //选中添加到数组里
			    console.log("this.rSelect", this.rSelect); //是数组，数组也有indexOf
			  } else {
			    this.rSelect.splice(this.rSelect.indexOf(e), 1); //取消
			  }
			},
			//选数量。。。。
			// numberChange(data) {
			// 	console.log(data,'3242342342')
			//   let that = this;
			 
			//   that.specSelected.number = data.number;
			//   console.log("详情加数量",data.number)
			//   console.log("numberdata", data);
			//   console.log("that.guige", that.guige);
			//   console.log("that.goodindex.id",that.goodindex.id)
			//   let zongjia=Number(that.goodindex.price)*Number(data.number)
			//   console.log("zongjia",zongjia)
			
			//  },
			 // 选好了
			 chooseGoodsFormat: function() {
			   let that=this;
			   if(!that.guige){
				  uni.showToast({
				  	title: '请选择规则',
				  	icon: 'none',
				  })
				  return;
			   }
			   console.log(that.goodsNum,'that.goodsNum111111111')
			   let zongjia=Number(that.goodsFormat.price)*Number(that.goodsNum)
			   var dgrequestData= {
			       goodsNum:that.goodsNum,
			       money:zongjia,
			       norm: that.guige,
			       price:that.goodsFormat.price,
			       toolingName:that.goodsFormat.name,
			       toolingId: that.goodsFormat.id,
			       toolingImage:that.goodsFormat.image
			     }
			   that.sendRequest({
			   	url :"/putGoods",
			   	method : "POST",
			   	data :dgrequestData,
			   	hideLoading : true,
			   	success:function (res) {
					if(res.result=="添加成功"){
						uni.showToast({
							title: '添加成功',
							icon: 'none',
							duration: 2000
						})
						that.goodslist.forEach(v=>{
							console.log(v.goodsNumInCarts,'订单数量')
							if(that.goodsFormat.id==v.id){
								if(v.goodsNumInCarts==null){
									v.goodsNumInCarts=0
								}
								v.goodsNumInCarts =v.goodsNumInCarts+dgrequestData.goodsNum
							}	
						})
						that.getCartList();
					}
			   	}
			   })
			   that.goodsNum=1;
			   that.guige='' 
			   that.rSelect = [];
			   this.showGoodsFormat = false;
			 },
			 hideGoodsFormat(){
				 let that=this;
				 that.guige=''
				 that.rSelect = [];
				 this.showGoodsFormat = false;
			},
			//浏览图片
			showGoodsDetailFun(photoImg){
				var that = this;
				console.log(photoImg,'photoImg>>>>>')
				let imgsArray = [];
				imgsArray[0] = that.imageUrl+photoImg;
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			}
		}
	}
</script>
<style>
	.tab-home-box{
		width: 100%;
		height: 100%;
		/* background-color: #FFFFFF; */
	}
	.header-top{
		width: 100%;
		height: 530rpx;
		position: relative;
		top: 0;
	}
	.header-image{
		width: 100%;
		height: 385rpx;
		position: absolute;
		top: 0;
		left: 0;
	}
	.header-title{
		position: absolute;
		top:108rpx;
		color:#FFFFFF;
		font-size: 36rpx;
		z-index: 1111;
		left: 50%;
		transform: translate(-50%, -50%);
		
	}
	
	.slide-image {
	  width: 100%;
	  height: 100%;
	}
	.notice{
		height: 80rpx;
		line-height: 80rpx;
		/* padding:0 32rpx; */
		display: flex;
		align-items: center;
		position: absolute;
		bottom: -5px;
		padding-left: 32rpx;
	}
	.notice-image{
		width: 45rpx;
		height: 40rpx;
	}
	.notice-title{
		height: 40rpx;
		line-height: 40rpx;
		margin-left: 22rpx;
		color:#555756;
		font-size:28rpx;
	}
	
	.shop {
	  width: 690rpx;
	  height: 236rpx;
	  background: #FFFFFF;
	  position: absolute;
	  bottom: 0;
	  left: 30rpx;
	  border-radius: 28rpx;
	  position: absolute;
	  top: 208rpx;
		
	}
	.shop-clock {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
	}
	.shop-clock image {
		width: 40rpx;
		height: 37rpx;
		margin: 0 10rpx;
	}
	
	.shop-clock-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-right: 35rpx;
	}
	.shop-clock-time {
		font-size: 32rpx;
		color: #767777;
	}
	.shop-message {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		font-size: 24rpx;
		position: relative;
		margin-top: 24rpx;
	}
	.shop-status {
		height: 40rpx;
		line-height: 40rpx;
		padding: 0 25rpx;
		color: #FA9F3A;
		background: rgba(250, 159, 58, 0.19);
		border-radius: 8rpx;
	}
	.shop-message-item {
		height: 40rpx;
		line-height: 40rpx;
		padding: 0 20rpx;
		color: #05A778;
		border: 1rpx solid #05A778;
		border-radius: 8rpx;
		margin-left: 10rpx;
	}

	
	.product-tab{
		width: 100%;
		display: flex;
		align-items: center;
		text-align: center;
		flex-wrap: nowrap;
		justify-content: space-between;
		height: 80rpx;
	}
	.product-tab-fixed{
		width: 100%;
		padding: 0 32rpx;
		display: flex;
		align-items: center;
		text-align: center;
		flex-wrap: nowrap;
		justify-content: space-between;
		position: fixed;
		top: 148rpx;
		left: 0;
		background: #ffffff;
		height: 80rpx;
		z-index: 100000;
		box-shadow: 0px 4rpx 14rpx rgba(0, 0, 0, 0.08);
		transition: background 1s;
		-moz-transition: background 1s;
		-webkit-transition: background 1s;
		-o-transition: background 1s;
	}
	
	.product-tab-item{
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		padding: 0 10rpx;
		margin-right: 20rpx;
		display: inline-block;
	}
	.product-tab-view{
		width: 100%;
		white-space: nowrap;
	}
	.product-tab-item text{
		font-size: 28rpx;
		font-weight: 500;
		line-height: 40rpx;
		color: #555756;
	}
	.product-tab-item text.active{
		font-size: 32rpx;
		font-weight: 800;
		line-height: 44rpx;
		color: #4EBFF9;
		padding-bottom: 4rpx;
		/* text-decoration:underline; */
		border-bottom: 8rpx solid #FFC400 ;
	}
	/* 商品 */
	
	.goods-cont {
		padding: 0 32rpx;
		background: #FFFFFF;
		z-index: 11111;
	}
	.goods-list {
	  width: 100%;
	  overflow: hidden;
	}
	
	.goods-box {
		position: relative;
		width: 50%;
		float: left;
		border-radius: 24rpx;
		background: #FFFFFF;
		margin-top: 24rpx;
	}
	.goods-image {
		 width: 330rpx;
		 height: 330rpx;
		 background: #FFFFFF;
		 border-radius: 24rpx 24rpx 0rpx 0rpx;
	}
	.goods-image image {
	  width:100%;
	  height:100%;
	   border-radius: 24rpx 24rpx 0rpx 0rpx;
	} 
	.goods-image view {
	  width: 100%;
	  height: 44rpx;
	  line-height: 44rpx;
	  font-size: 24rpx;
	  color: #F5F5F5;
	  text-align: center;
	  background:rgba(0, 0, 0, 0.5);
	  position: absolute;
	  left: 0;
	  bottom: 0;
	} 
	.goods-info {
	  margin-top: 22rpx;
	  padding: 0 20rpx;
	}
	.goods-name {
	  font-size: 24rpx;
	  line-height: 29rpx;
	  display: -webkit-box;
	  -webkit-line-clamp: 2;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  -webkit-box-orient: vertical;
	  margin-bottom: 30rpx;
	}
	.goods-sales {
	  color: #767777;
	  font-size: 24rpx;
	  padding-top: 5rpx; 
	}
	.godos-specs {
	  color: #666666;
	}
	.goods-bootom{
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	.goods-price{
		font-size: 40rpx;
		font-family: DIN;
		font-weight: bold;
		line-height: 48rpx;
		color: #F24848;
	}
	.goods-add-cart{
		width: 61rpx;
		height: 61rpx;
	}
	
	.goods-away {
	  height: 30rpx;
	  line-height: 30rpx;
	  font-size: 20rpx;
	  margin-top: 5rpx;
	  display: inline-block;
	  color: #F99401;
	  border: 1rpx solid rgb(255, 207, 136);
	  border-radius: 5rpx;
	  padding: 0 14rpx;
	}
	
	.goods-add-count {
	  font-size: 22rpx;
	  font-size: 22rpx;
	  padding: 10rpx;
	  top: 4rpx  !important;
	}
	.add-cart-standards {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		flex-direction: row-reverse;
		position: relative;
	}
	.add-cart-standards img {
	margin-top: -10rpx;
	}
	.goods-count-point {
		width: 36rpx;
	    height: 36rpx;
	    line-height: 36rpx;
	    text-align: center;
	    font-size: 24rpx;
	    color: #FFFFFF;
	    background: #F53914;
	    border: 2rxp solid #FFFFFF;
	    -webkit-border-radius: 19px;
	    border-radius: 36rpx;
	    position: absolute;
	    top: -15rpx;
	    left: 37rpx;
	    z-index: 10;
	}
	.goods-add-cart image {
	  width: 40rpx;
	  height: 40rpx;
		/* padding: 8rpx 16rpx; */
	}
	.goods-add-cart .add-default {
		width: 60rpx;
		height: 60rpx;
		transform: translate(0, -10rpx);
	}
	.mustChoose{
		width: 54rpx;
		height: 88rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		text-align: center;
		color: #FFFFFF;
		letter-spacing: 2rpx;
		background: #FE4949;
		opacity: 1;
		border-radius: 0px 0px 36rpx 36rpx;
		position: absolute;
		top: 0;
		left: 40rpx;
	}
	.nodata{
		padding: 100rpx;
		width: 100%;
		display: flex;
		justify-content: center;
	}
	.more-tip{
		line-height: 50rpx;
		height: 50rpx;
		color: #FE4949;
		font-size: 24rpx;
		text-align: center;
		margin: 0 auto;
		
	}
 /*---------------------规格---------------------------- */
.goods-format{
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}
.format-mask {
  width: 100%;
  height: 100%;
}
.format-row {
  padding: 15rpx 0;
  padding-bottom: 5rpx;
  display: flex;
}
.format-row .defa{
	width: 60rpx;
	height: 52rpx;
	border: 1px solid #D1D1D1;
	opacity: 1;
	margin-right: 30rpx;
	line-height: 52rpx;
	text-align: center;
}
.active1{
  color: #FFFFFF;
  border: 1px solid #e5e5e5;
  background-color: #ff5d00;

}
.goods-title{
	width: 98rpx;
	height: 44rpx;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	line-height: 44rpx;
	color: #323332;
}
.goods-format-box {
  width: 750rpx;
    background: #fff;
    position: absolute;
    /* top: 50%; */
    /* left: 50%; */
    /* -webkit-transform: translate(-50%, -50%); */
    /* transform: translate(-50%, -50%); */
    /* -webkit-border-radius: 13px; */
    border-radius: 20rpx 20rpx 0 0;
    padding: 30rpx;
    padding-bottom: 0;
    bottom: 4rpx;
}
.goods-format-box-close{
  width: 48rpx;
  height: 48rpx;
  position: absolute;
  top: 30rpx;
  right: 30rpx;
}
.goods-format-message {
  width: 100%;
  padding-bottom: 40rpx;
}
.goods-format-message image{
  width: 140rpx;
  height: 110rpx;
  border-radius: 15rpx;
}
.goods-format-message>view{
  display: inline-block;
  width: 438rpx;
  vertical-align: top;
  margin-left: 16rpx;
}
.goods-format-message .goods-name {
  display: inline-block;
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(102, 102, 102, 1);
  width: 380rpx;
  /* white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden; */
}
.goods-format-select {
  font-size: 28rpx;
  color: #666666;
  padding: 15rpx 0;
}
.goods-format-select-item {
  color: #05A778;
  padding: 0 15rpx;
}
.goods-prompt{
  font-size: 24rpx;
  color: #999999;
  margin-top: 20rpx;
}
.goods-prompt-image {
  width: 25rpx;
  height: 25rpx;
  margin-right: 5rpx;
  vertical-align: middle;
}
.goods-format-btn {
  height: 44rpx;
  line-height: 44rpx;
  /* text-align: right; */
  display: flex;
  justify-content: space-between;
  padding: 28rpx 0;
  position: relative;
  border-top: 1rpx solid rgba(238,238,238,1);
  margin-top: 20rpx;
  box-sizing: content-box;
}
.goods-format-btn view, .goods-format-btn image {
  display: inline-block;
}
.format-list {
  font-size: 24rpx;
  color: #999999;
}
.format-item {
  display: inline-block;
  width: 70rpx;
  line-height: 61rpx;
  border: 1rpx solid #A3A4A4;
  /* -webkit-border-radius: 8rpx; */
  /* border-radius: 8rpx; */
  text-align: center;
  margin-right: 15rpx;
  margin-bottom: 15rpx;
  overflow: hidden;
}
.format-item .text{
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.format-item:nth-child(3n) {
  /* margin-right: 0rpx; */
}
.format-item-active {
  border: 1rpx solid #FF892E;
  color: #ffff;
  background: #FF892E;
}

.goods-format-price {
	height: 44rpx;
    font-size: 30rpx;
}
.goods-add-btn {
  height: 44rpx;
  line-height: 44rpx;
  padding: 0 20rpx;
  background: #FF892E;
  border-radius: 22rpx;
  text-align: center;
  font-size: 24rpx;
  color: #FFFFFF;
}
.goods-add-btn1 {
  margin: 26rpx 0;
  height: 66rpx;
  line-height: 66rpx;
  padding: 0 88rpx;
  background: #FF892E;
  -webkit-border-radius: 12px;
  border-radius: 66rpx;
  text-align: center;
  font-size: 24rpx;
  color: #FFFFFF;
}
.delivery-time {
  margin-left: 35rpx;
  margin-top: 10rpx;
}
.alert_class {
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.7);
		text-align: center;
		justify-content: center;
		z-index: 100;
		width: 100%;
		height: 100%;
	}

	.alert_content_closebtn {
		width: 270rpx;
		height: 200px;
		/* background: #272B29; */
		/* opacity: 0.9; */
		border-radius: 12rpx;
		margin-top: -90rpx;
	}

	.alert_content {
		margin: 0 10%;
		margin-top: 35%;
		background-size: 100%;
		background-color: #FFFFFF;
		height: 650rpx;
		display: flex;
		flex-direction: column;
		border-radius: 25rpx;
		text-align: center;
		align-items: center;
		position:relative;
	}
	.alert-konw {
		position: absolute;
		/* bottom: 25%; */
		left: 10%;
		bottom: 40rpx;
		background-color: #26C68A;
		height: 80rpx;
		color: #FFFFFF;
		font-size: 15px;
		border-radius: 40rpx;
		padding-top: 25rpx;
		margin: 0 auto;
		/* margin: 125rpx 50rpx; */
		width: 500rpx;
	}
 .add-plus-btn{
		width: 153rpx;
		height: 50rpx;
		position: absolute;
		right: 0;
		bottom: 0;
	}
 .add-plus-btn .add-plus-img{
		width: 153rpx;
		height: 50rpx;
	}
 .add-plus-btn>input{
		width: 44rpx;
		height: 44rpx;
		position: absolute;
		left: 50%;
		margin-left: -22rpx;
		top: 0;
		text-align: center;
		font-size: 32rpx;
		color: #323332;
	}
 .add-plus-btn>.add-btn{
		width: 60rpx;
		height: 64rpx;
		position: absolute;
		right: -5px;
		top: -5px;
		/* font-size: 60rpx;
		background: #F8F8F8;
		text-align: center;
		line-height: 64rpx; */
	}
	 .add-plus-btn>.disabled{
		color: #ccc; 
	}
	 .add-plus-btn> .normal{
		color: black;
	}
	 .add-plus-btn>.reduce-btn{
		width: 60rpx;
		height: 64rpx;
		position: absolute;
		left: -5rpx;
		top: -5rpx;
		/* font-size: 60rpx;
		background: #F8F8F8;
		text-align: center;
		line-height: 64rpx; */
	}
	

	
</style>